<template>
	<scroll-view class="main-content" scroll-y="true" @scrolltolower="loadMore">
		<view class="new-list">
			<view class="new-item row-center-random " v-for="(item, index) in newList" :key="index" @click="toNewDetail(item)">
				<image :src="baseUrl + item.contentPicture" mode="" class="new-image"></image>
				<view class="new-info">
					<view class="new-title text-ellipsis-two">
						{{item.title}}
					</view>
					<!-- <view class="new-mesage ellipsis-text" style="margin-top: 0;">
						<rich-text type="text" :nodes="item.contentText"></rich-text>
					</view> -->
					<view class="new-mesage">
						{{item.createTime}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="isAllData != 0">
			<view class="loading" v-if="isAllData == '1'">
			  正在加载，请稍候
			  <uni-icons type="spinner-cycle" size="16" style="margin-left: 4px;"></uni-icons>
			</view>
			<view class="all-data" v-else>已加载全部数据~</view>
		</view>
	</scroll-view>
</template>

<script>
	import Home from '@/api/home.js'
	import pageConfig from '@/config'
	const baseUrl = pageConfig.baseUrl
	export default {
		data() {
			return {
				baseUrl,
				newList: [],
				total: 0,
				pageInfo: {
					pageNum: 1,
					pageSize: 10
				},
				isAllData: '0'
			}
		},
		onLoad() {
			this.getNewList();
		},
		methods: {
			toNewDetail(item) {
				uni.navigateTo({
					url: "/subPages/home/articleDetails?id="+item.id
				})
			},
			async getNewList() {
				this.isAllData = '0';
				let res = await Home.getArticleList({type: 2, ...this.pageInfo});
				this.newList.push(...res.rows);
				this.total = res.total;
				console.log(res)
				let {pageNum, pageSize} = this.pageInfo;
				if(pageNum  >= this.total / pageSize) {
					this.isAllData = '2';
				} else {
					this.isAllData == '0';
				}
			},
			loadMore() {
				let {pageNum, pageSize} = this.pageInfo;
				if(pageNum  >= this.total / pageSize) {
					this.isAllData = '2';
					return;
				}
				this.$set(this.pageInfo, 'pageNum', pageNum+1);
				this.getNewList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.loading,
	.all-data {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999;
		padding: 15rpx 0;
	}
	.main-content {
		padding: 20rpx 28rpx;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		box-sizing: border-box;
		background: #fff;
		padding-bottom: var(env(safe-area-inset-bottom));
	}
	.new-list {
		.new-item {
			margin-bottom: 20rpx;
	
			.new-image {
				flex: 0 0 220rpx;
				width: 220rpx;
				height: 165rpx;
				background: #D9D9D9;
				border-radius: 24rpx;
			}
	
			.new-info {
				margin-left: 20rpx;
				width: 454rpx;
				height: 165rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				box-sizing: border-box;
				.new-title {
					font-size: 30rpx;
					color: $main-font-black;
					font-weight: 500;
					height: 92rpx;
					overflow: hidden;
					line-height: 46rpx;
				}
				.new-mesage {
					font-size: 26rpx;
					color: $main-font-auxiliary;
					margin-top: 10rpx;
					line-height: 1;
					&:first-of-type {
						margin-top: 0;
					}
				}
			}
		}
	}
</style>